import axios from 'axios';
import React, { Component } from 'react'
import './index.css';

export default class Weather extends Component {
    state = {
        wea: [
        ]
    }
    render() {
        return (
            <div>
                <h2>天气查询</h2>
                <div> <input type="text" ref={el => this.input = el} /> 
                    <button onClick={this.queryWea}>点击查询</button> </div>
                <hr />
                <div className="result">
                    <ul>
                        {
                            this.state.wea.map(item => {
                                return <li key={item.date}>{item.date}  -- {item.wea}</li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }

    queryWea = async () => {
        //获取城市的名称
        let cityName = this.input.value;
        //拼接 url
        let url = 'https://www.tianqiapi.com/api/?version=v1&city='+cityName+'&appid=23941491&appsecret=TXoD5e8P'
        //发送请求
        let result = await axios(url);
        this.setState({
            wea: result.data.data   //响应体
        })
    }
}
